import React, { PureComponent } from 'react'
import { Form, Modal, Row, Col, Button, Select, TreeSelect, Input, InputNumber, DatePicker, Radio } from 'antd'<#list forms as form><#if (form.type=='DataList')>
import { DataList } from 'components'<#elseif (form.type=='Editor')>
import { RichEditor } from 'components'</#if></#list>
import moment from 'moment';

const FormItem = Form.Item<#list forms as form><#if (form.type=='DataList')>
const InputGroup = Input.Group;</#if></#list>

@Form.create()
class Dialog extends PureComponent {

	<#list forms as form><#if (form.type=='Editor')>
	onDesRef = ref => {
		this.desEdit = ref
	}</#if></#list>

	render() {
		const { item = {}, modalType, onOk, onCancel, form, dispatch, loading,<#list forms as form><#if (form.type=='TreeSelect')> ${form.name}Tree,</#if></#list><#list forms as form><#if (form.type=='DataList')> ${namespace}${form.name? cap_first},</#if></#list> ...modalProps } = this.props
		const { getFieldDecorator, validateFields, getFieldsValue, setFieldsValue, resetFields } = form
		
		const handleOk = () => {
			validateFields(errors => {
				if (errors) {
					return
				}
				const data = getFieldsValue()
				<#list forms as form><#if (form.type=='DataList')>
				data.${form.name}={"id":data.${form.name}Option.key}
				delete data.${form.name}Option
				</#if><#if (form.type=='TreeSelect')>
				data.${form.name}={"id":data.${form.name}Node.value}
				delete data.${form.name}Node
				</#if><#if (form.type=='DatePicker')>
				data.${form.name}=moment(data.${form.name}).format('YYYY-MM-DD')
				</#if></#list>
				onOk(data)
				resetFields()
			})
		}
		
		const handleChancel = () => {
			onCancel()
			resetFields()
		}
		
	<#list forms as form>
	<#if (form.type=='DataList')>
		const ${form.name}Props={
			dispatch,
			loading,
			filterItem:${namespace}${form.name? cap_first}.filterItem,
			dataSource:${namespace}${form.name? cap_first}.list,
			pagination:${namespace}${form.name? cap_first}.pagination,
			visible:${namespace}${form.name? cap_first}.visible,
			selectedRows:${namespace}${form.name? cap_first}.selectedRows,
			selectedRowKeys:${namespace}${form.name? cap_first}.selectedRowKeys,
			columns:[<#list form.columns as col>
			{
				title:'${col.title}',
				dataIndex: '${col.name}',<#if (col.align)>
				align:'left',</#if><#if (col.render)>
				render:(text, record) => {<#list col.constant as con>
					if(text==<#if (con.type=='String')>"${con.value}"<#else>${con.value}</#if>){
						return "${con.comment}"
					}</#list>
					return "";
				}</#if>
			},</#list>
			],
			namespace:'${namespace}${form.name? cap_first}',
			multiple:false,
			filterItems:[<#list form.filters as filter>
				{
					type: '${filter.type}',
					label: '${filter.title}',
					target: '${filter.name}',
					tip: '輸入${filter.title}',
					key: '${filter.name}',
				},</#list>
			],
			modalProps:{
				title:'${form.title}列表',
				width:800,
			},
			onOk(keys,rows){
				let ${form.name}Id=keys.length==0 ? undefined : keys[0]
				let ${form.name}=rows.length==0 ? undefined : rows[0].name
				dispatch({type:'${namespace}/updateState',payload:{currentItem:{...item,${form.name}Id,${form.name}}}})
				setFieldsValue({ ${form.name}Option: keys.length==0 ? undefined : { key: keys[0], label: rows[0].name } });
				dispatch({type:'${namespace}${form.name? cap_first}/hideModal'})
			},
		}
	</#if>
	</#list>

		return (
			<Modal {...modalProps} destroyOnClose onOk={handleOk} onCancel={handleChancel}>
			<Form>
				<Row gutter={10}><#list forms as form>
					<#if (form.type=='DataList')>
					<Col span={12}>
						<FormItem label={'${form.title}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
						<InputGroup compact>
							{getFieldDecorator('${form.name}Option', {
								initialValue: {key:item.${form.name}Id?item.${form.name}Id:'',label:item.${form.name}?item.${form.name}:''},
								rules: [
									{validator:async (rule, value) => {if(value.key==''){throw new Error('请选择${form.title}!');}}},
								],
							})
							(
								
								<Select placeholder='${form.title}'
								 	style={{width:'80%'}}
									showArrow={false}
									labelInValue >
									<Select.Option value={item.${form.name}Id?item.${form.name}Id:''}>{item.${form.name}?item.${form.name}:''}</Select.Option>
								</Select>
								
							)}
							<Button style={{width:'20%'}} type="primary" onClick={e => {dispatch({type:'${namespace}${form.name? cap_first}/query'});dispatch({ type:'${namespace}${form.name? cap_first}/showModal' })}}>. . .</Button>
						</InputGroup>
						</FormItem>
					</Col>
					<#elseif (form.type=='TreeSelect')>
					<Col span={12}>
						<FormItem label={'${form.title}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
							{getFieldDecorator('${form.name}Node', {
								initialValue: item.${form.name}Id==null?undefined:{value:item.${form.name}Id,label:item.${form.name}},
								rules: [
									{required: true,message:'请选择${form.title}!'},
								],
							})
							(<TreeSelect style={{width:'100%'}} placeholder='${form.title}' treeDefaultExpandAll labelInValue treeData={${form.name}Tree} />)}
						</FormItem>
					</Col>
					<#elseif (form.type=='Radio')>
					<Col span={12}>
						<FormItem label={'${form.title}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
							{getFieldDecorator('${form.name}', {
								initialValue: item.${form.name},
								rules: [
									{required: true,message:'请选择${form.title}!'},
								],
							})(<Radio.Group><#list form.constant as con><Radio value={${con.value}}>${con.comment}</Radio></#list></Radio.Group>)}
						</FormItem>
					</Col>
					<#elseif (form.type=='Select')>
					<Col span={12}>
						<FormItem label={'${form.title}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
							{getFieldDecorator('${form.name}', {
								initialValue: item.${form.name},
								rules: [
									{required: true,message:'请选择${form.title}!'},
								],
							})(
							<Select style={{width:'100%'}}><#list form.constant as con>
								<Select.Option value={${con.value}}>${con.comment}</Select.Option></#list>
							</Select>)}
						</FormItem>
					</Col>
					<#elseif (form.type=='Editor')>
					<Col span={24}>
						<Form.Item label={'${form.title}'}>
							{getFieldDecorator('${form.name}', {
								valuePropName: 'html',
								initialValue: item.${form.name} || '',
								trigger: 'inputValue',
							})(
								<RichEditor
									onRef={this.onDesRef}
									imagePostUrl="/api/attachment"
								/>
							)}
						</Form.Item>
					</Col>
					<#else>
					<Col span={12}>
						<FormItem label={'${form.title}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
							{getFieldDecorator('${form.name}', {
								initialValue: <#if (form.type=='DatePicker')>item.${form.name}?moment(item.${form.name}):moment()<#else>item.${form.name}</#if>,
								rules: [
									{required: true,message:'请输入${form.title}!'},
								],
							})(<${form.type} style={{width:'100%'}}/>)}
						</FormItem>
					</Col></#if></#list>
	 			</Row>
			</Form>
			<#list forms as form>
			<#if (form.type=='DataList')>
			<DataList {...${form.name}Props}/>
			</#if>
			</#list>
			</Modal>
		)
	}
}
export default Dialog
